<template>
	<el-container class="sign-in">
		<el-header class="header">欢迎使用 Element-Admin-Vue3</el-header>
		<el-main class="main">
			<el-row :gutter="20">
				<el-col :span="8" :offset="8">
					<el-card v-loading="$store.state.loading" style="margin-top: 80px;"
						element-loading-background="rgba(0, 0, 0, 0.8)">
						<el-form>
							<p class="sign-in-title">欢迎回来 / 使用账号密码登陆</p>
							<el-form-item>
								<el-input type="text" v-model="user.userName" auto-complete="off"
									placeholder="请输入用户名...">
									<template #prepend><i class="el-icon-user"></i></template>
								</el-input>
							</el-form-item>
							<el-form-item>
								<el-input type="password" v-model="user.password" auto-complete="off"
									placeholder="请输入密码...">
									<template #prepend><i class="el-icon-more"></i></template>
								</el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" style="width: 100%;" @click="login"
									:loading="$store.state.loading">登录</el-button>
							</el-form-item>
						</el-form>
					</el-card>
				</el-col>
			</el-row>
		</el-main>
	</el-container>
</template>

<script>
	export default {
		name: "Login",
		data() {
			return {
				user: {
					userName: "",
					password: ""
				}
			};
		},
		methods: {
			login() {
				this.$store.state.loading = true
				this.$http.post("/passport/signIn", this.user).then(res => {
					console.log('mockjs返回的信息：', res);
					if (res.data.token) {
						this.$store.commit("setToken", res.data.token);
						this.$router.push({
							path: "/dashboard"
						});
						this.$store.state.loading = false
					}
				});
			}
		}
	};
</script>
<style lang="scss">
	.sign-in {
		background: linear-gradient(-150deg, #02ffc5, #195aff);
		height: 100%;

		.header {
			font-size: 36px;
			line-height: 60px;
			text-align: center;
		}

		.main {
			.sign-in-title {
				text-align: center;
				font-size: 24px;
				font-weight: 500;
			}
		}
	}
</style>
